<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电商管理前端</title>
    <link rel="shortcut icon" href="../favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../styles/common.css" />
    <link rel="stylesheet" href="../styles/index.css" />
    <link rel="stylesheet" href="../styles/icon/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/all.css" />
    <link rel="stylesheet" type="text/css" href="../styles/pages-JD-index.css" />
    <link rel="stylesheet" type="text/css" href="../styles/pages-cart.css" />
    <link rel="stylesheet" type="text/css" href="../styles/pages-getOrderInfo.css" />
    <link rel="stylesheet" type="text/css" href="../styles/pages-home.css"/>
    <style type="text/css">
        h4{
            font-size: 20px;
            line-height: 35px;
            text-align: center;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<body>
<!-- 头部栏位 -->
<!--页面顶部-->
<div id="app">
    <!--顶部-->
    <div class="nav-top">
        <div class="top">
            <div class="py-container">
                <div class="shortcut">
                    <ul class="fl">
                        <span v-if="user===''">请<a href="/pages/userlogin.html">登录</a></span>
                        <span v-else>{{user}},欢迎你</span>
                        <span><a href="register.html">免费注册</a></span>
                    </ul>
                    <div class="fr typelist" style="margin-top: -29px">
                        <ul class="types" style="margin-left: 390px">
                            <li class="f-item">
                                <span>
                                    <a href="shopping.html">首页</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="cart.html">我的购物车</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="home.html">个人信息</a>
                                </span>
                            </li>
                            <li class="f-item">
                                <span>
                                    <a href="/logout">退出</a>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g Logo">
                    <div class="yui3-u Left logoArea">
                        <img src="../images/logo2.png" style="margin-left: -40px; height: 200px; width: 250px;margin-top: -30px;">
                    </div>
                    <div class="yui3-u Rit searchArea" style="margin-right: -100px;margin-top: 72px;font-size: 40px;font-family: '宋体';color: red;">
                        欢迎来到未来生活！
                    </div>
                </div>
            </div>
        </div>
    </div>




    <div class="py-container">
        <div class="yui3-g home">
            <!--左侧列表-->
            <div class="yui3-u-1-6 list">
                <dl>
                    <dt><i>·</i> 个人中心</dt>
                    <dd><a href="/pages/home.html" >首页</a></dd>
                    <dd><a href="/pages/myaddress.html" >我的地址</a></dd>
                    <dd><a href="/pages/myorder.html" >我的订单</a></dd>
                </dl>
            </div>
            <!--右侧主内容-->
            <div class="yui3-u-5-6 body">
                <div class="order">
                    <div class="order-detail">
                        <div>
                            <el-input v-model="address" placeholder="请输入新的收货地址" style="float: left;width: 400px" clearable></el-input>
                            <el-button type="primary" style="float: left;margin-left: 20px" @click="handleAdd">添加</el-button>
                        </div>
                        <el-table size="small" current-row-key="id" :data="addressList" stripe highlight-current-row>
                            <el-table-column type="index" label="序号" align="center"></el-table-column>
                            <el-table-column prop="name" label="地址" align="center"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>



</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/login.js"></script>
<script type="text/javascript" src="../js/all.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data (){
            return {
                user:'',
                uid:'',
                addressList:[],
                address:''
            }
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            axios.get("/user/getUsername").then((res) => {
                if(res.data.flag){
                    this.user=res.data.data;
                }
            });
            axios.get("/user/getUserid").then((res) => {
                if(res.data.flag){
                    this.uid=res.data.data;
                }
                this.getAddress();
            });
        },
        methods: {
            getAddress() {
                axios.get("/address/findAll?uid="+this.uid).then((res)=>{
                    if (res.data.flag){
                        this.addressList = res.data.data;
                    }
                })
            },
            handleAdd(row) {
                var param={
                    userId:this.uid,
                    name:this.address
                }
                if (this.address===''){
                    this.$alert("请输入收货地址");
                    return false;
                }else{
                    axios.post("/address/add",param).then((res) =>{
                        if (res.data.flag){
                            this.$alert("添加成功！");
                            this.getAddress();
                        }
                    })
                }
            },
            handleDelete(row) {
                this.$confirm("你确定要删除当前收货地址吗？","提示",{
                    type: 'warning'
                }).then(() => {
                    axios.delete("/address/delete?id="+row.id).then((res) => {
                        if(res.data.flag){
                            this.$message({
                                type:'success',
                                message:res.data.message
                            });
                            this.getAddress();
                        }else {
                            this.$message.error(res.data.message);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type:'info',
                        message:"操作已取消"
                    });
                })
            }
        },
    })
</script>
</html>